<template>
  <el-card class="box-card">
    <!-- 1.面包屑 -->
    <my-bread level1="用户管理" level2="用户列表"></my-bread>

    <!-- 搜索 -->
    <el-row class="searchRow">
      <el-col>
        <el-input
          placeholder="输入姓名查找"
          v-model="query"
          class="inputSearch"
        >
        </el-input>
        <el-button @click="add" type="success">添加</el-button>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table :data="listData" border>
      <el-table-column prop="id" label="编号" align="center" width="60">
      </el-table-column>
      <el-table-column prop="url" label="图片" align="center" width="500">
        <template slot-scope="scope">
          <img :src="scope.row.url" alt="" height="200" />
        </template>
      </el-table-column>
      <el-table-column
        prop="categories"
        label="分类"
        align="center"
        width="165"
      >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.categories" :key="index">
            {{ item.name }}
          </div>
        </template>
      </el-table-column>

      <!-- 在单元格中展示非文本数据，如插值表达式，外层要添加容器 -->
      <!-- <el-table-column label="创建时间" align="center" width="165"> -->
      <!-- 不同组件之间数据不共享，因为自动向上找值，所以写什么都行，slot-scope=“123”， -->
      <!-- <template slot-scope="scope"> -->
      <!-- time属性值的源头是listData，这里的scope是listData   .row数组中每一个对象 -->
      <!-- 使用全局过滤器，过滤时间格式 -->
      <!-- {{ scope.row.time | fmtdate }} -->
      <!-- </template> -->
      <!-- </el-table-column> -->
      <!-- <el-table-column label="用户状态" align="center" width="147">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column> -->
      <el-table-column prop="address" label="操作" align="center" width="160">
        <template slot-scope="scope">
          <el-button
            size="mini"
            plain
            type="primary"
            icon="el-icon-edit"
            circle
            @click="edit(scope.$index, scope.row)"
          ></el-button>
          <el-button
            size="mini"
            plain
            type="danger"
            icon="el-icon-delete"
            circle
            @click="del(scope.$index, scope.row)"
          ></el-button>
          <el-button
            size="mini"
            plain
            type="success"
            icon="el-icon-check"
            circle
            @click="Rol(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pag"
      background
      layout="prev, pager, next"
      @current-change="pageChange"
      :total="100"
    >
    </el-pagination>
    <!-- 新增编辑弹框 -->
    <el-dialog
      :title="isEdit ? '编辑' : '新增计划'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.emali" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOk">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 权限设置弹框 -->

    <el-dialog title="职位分配" :visible.sync="dialogFormVisibleRol">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          {{ RolName }}
        </el-form-item>
        <el-form-item label="权限" :label-width="formLabelWidth">
          <el-select v-model="form.region">
            <el-option label="主管" value="主管"></el-option>
            <el-option label="经理" value="经理"></el-option>
            <el-option label="组长" value="组长"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleRol = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleRol = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { getImgList } from "./apis";
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisibleRol: false,
      isEdit: false,
      query: "",
      formLabelWidth: "120px",
      RolName: "",
      editIndex: "",
      form: {
        name: "",
        emali: "",
        mobile: "",
        time: new Date(),
        state: true,
        region: ""
      },
      listData: []
    };
  },

  mounted() {
    this.getList(1);
  },

  methods: {
    async getList(page) {
      var list = await getImgList({ page: page, limit: 10 });
      console.log(list);
      this.listData = list;
    },

    pageChange(page) {
      this.getList(page);
    },

    add() {
      this.form = {};
      this.dialogFormVisible = true;
    },
    addOk() {
      if (this.isEdit) {
        this.listData.splice(this.editIndex, 1, this.form);
      } else {
        this.listData.push(this.form);
      }
      this.dialogFormVisible = false;
    },
    edit(index) {
      this.dialogFormVisible = true;
      this.isEdit = true;
      this.form = { ...this.listData[index] };
      this.editIndex = index;
    },
    Rol(index, row) {
      this.dialogFormVisibleRol = true;
      this.RolName = row.name;
    },
    del(index) {
      this.listData.splice(index, 1);
    }
  }
};
</script>

<style>
.box-card {
  height: 100%;
}
.inputSearch {
  width: 300px;
}
.searchRow {
  margin-top: 20px;
}
.el-table {
  width: 85%;
  margin-top: 5px;
}
.pag {
  padding-left: 590px;
}
</style>
